<template>
  <div class="">
    <input v-model="num.current" step="20" type="number" />
    <div>
      {{ num.tweenedNumber.toFixed(0) }}
    </div>

    <div v-if="data.length">
      {{ data[0].state}}

    </div>
   
    <div  :startVal='countto.startVal' :endVal='countto.endVal' :duration='countto.duration'>
      <div v-if="data[0].buytime != ''">
      {{intervalTime}}
    </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, watchEffect, onUnmounted } from "vue";
import gsap from "gsap";
import { CountTo } from 'vue3-count-to';

import { axios } from "./server/axios";

const num = reactive({
  current: 0,
  tweenedNumber: 0,
});
const countto = ref({
// 需要滚动的时间
duration: 1000,
        // 初始值
        startVal: 0,
        // 最终值
        endVal: 2018
})

// 定时时间
let intervalTime = ref("0天0小时0分钟0秒");
//当前时间
let nowTime = ref(0);
// 结束时间
let endTime = ref(0);
let timer:any = null;
let data = reactive<any>([{}]);

const getData = ()=>{
   axios.get("../public/order.json").then((res:any)=>{
      console.log(res,"orderData");
      data = res.order
   })
}
const innerDate = (date:any,d?: any)=>{
   let today = new Date(date).valueOf();
    let myday:any = today + d * 24 * 60 * 60 * 1000;//加减天
    // myday = today + h * 60 * 60 * 1000;//加减时
// 　　var myday = today + d * 60 * 1000;//加减分
// 　　var myday = today + d * 1000;//加减秒

    myday = new Date(myday);
console.log(myday);

    let yyyy = myday.getFullYear();
    let MM = myday.getMonth() + 1;
    let dd = myday.getDate();
    let hh = myday.getHours();
    let mm = myday.getMinutes();
    let ss = myday.getSeconds();
    return {
      year:yyyy,
      month:MM,
      day:dd,
      hour:hh,
      minutes:mm,
      seconds:ss,
      date:yyyy+"-"+(MM<10?"0"+MM:MM)+"-"+(dd<10?"0"+dd:dd)+" "+hh+":"+mm+":"+ss
    };
}
const CountDown = (year:any, month:any, day:any, hours:any,minutes:any,seconds:any,)=> {
    let now = new Date();
    let endDate = new Date(year, month - 1, day, hours,minutes,seconds);
    
    let leftTime = endDate.getTime() - now.getTime();//计算剩余的毫秒数
    if (leftTime <= 0) {
        leftTime = 0;
    }
    let leftsecond = leftTime / 1000;//计算剩余的秒数
     day = Math.floor(leftsecond / (60 * 60 * 24));
    let hour = Math.floor((leftsecond - day * 24 * 60 * 60) / 3600);
    let minute = Math.floor((leftsecond - day * 24 * 60 * 60 - hour * 3600) / 60);
    let second = Math.floor(leftTime / 1000 % 60);
    return `${day}天${hour}小时${minute<10?'0'+minute:minute}分钟${second<10?'0'+second:second}秒`;
}

getData()
let timeout = setInterval(()=>{
  if(localStorage.getItem("today")){
    
  }else{
    localStorage.setItem("today",JSON.stringify(new Date().valueOf()))
  }

   if(data[0].buytime){
    let today = localStorage.getItem("today")
 
    if(today){
      let myday:any = Number(today) + 3 * 60 * 60 * 1000;
      myday = new Date(myday);
        let yyyy = myday.getFullYear();
        let MM = myday.getMonth() + 1;
        let dd = myday.getDate();
        let hh = myday.getHours();
        let mm = myday.getMinutes();
        let ss = myday.getSeconds();
          let endtime =  innerDate(data[0].buytime,3);
          
          intervalTime.value = CountDown(endtime.year,endtime.month,endtime.day,endtime.hour,endtime.minutes,endtime.seconds)
          // intervalTime.value = CountDown(yyyy,MM,dd,hh,mm,ss)
    }
  
   }
   
},1000)
// watch(
//   [()=>num.current,()=>intervalTime.value],
//   (newVal, oldVal) => {
//    console.log(newVal);
   
//     gsap.to(num, {
//       duration: 1,
//       tweenedNumber: newVal[0],
//     });
//   }
// );
watchEffect(() => {
   gsap.to(num, {
      duration: 1,
      tweenedNumber: num.current,
    });
   console.log(intervalTime.value,"计时时间");
   
});
onUnmounted(() => {
  clearInterval(timeout)
});

</script>

<style scoped></style>
